<template>
  <div class="card-one">
    <f7-link :class="{'not-link': !link}" :href="link" @click="$emit('click')">
      <div class="left">
        <img v-if="media" :src="media || '../static/avatar.jpg'" alt="">
        <div>
          <h3>{{title}}</h3>
          <p>{{subtitle}}</p>
        </div>
      </div>
      <div>
        <div class="after">
          <slot name="after" v-if="after || $slots['after']">
            <div>
              <h4>0.00000000</h4>
              <p>≈$0.00000000</p>
            </div>
          </slot>
        </div>
        <f7-icon f7="chevron_right" v-if="link"></f7-icon>
      </div>
    </f7-link>
  </div>
</template>

<script>
  export default {
    name: "card",
    props: {
      media: {
        type: String
      },
      title: {
        type: String,
      },
      subtitle: {
        type: String,
      },
      after: {
        type: String
      },
      link: {
        type: [Boolean, String]
      },
    }
  }
</script>

<style scoped lang="scss">
  .card-one {
    margin-bottom: $padding20;
    .link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #000;
      background: #fff;
      /*padding: 40px;*/
      padding: 0 40px;
      height: 160px;
      border-radius: $radius;
      &.not-link.active-state {
        opacity: 1;
      }
      img {
        width: 60px;
        margin-right: $padding20;
      }
      > div{
        display: flex;
        align-items: center;
        p {
          color: $colorGrey;
        }
        .after {
          text-align: right;
          /deep/ {
            > div {
              > *{
                &:nth-child(2) {
                  color: $colorGrey;
                }
              }
            }
          }
        }
      }
      .icon {
        margin-left: 20px;
        font-size: 30px;
      }
    }
  }
</style>
